<template>
    <div class="markdown-view">
        <CherryMarkdownEditor ref="MDRef" :markDownConent="markDownConent" :mdId="mdId" :tocVisiable="tocVisiable"
            :displayModal="displayModal" @input='mdInput' @md-change='mdChange' />
    </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue';
import Axios from 'axios';
import CherryMarkdownEditor from './components/CherryMarkdownEditor.vue';
const MDRef = ref(null);
let markDownConent = ref("");
const mdId = ref('mdId');
const tocVisiable = ref(false);

// edit&preview: 双栏编辑预览模式
// editOnly: 纯编辑模式（没有预览，可通过toolbar切换成双栏或预览模式）
// previewOnly: 预览模式（没有编辑框，toolbar只显示“返回编辑”按钮，可通过toolbar切换成编辑模式）
const displayModal = ref('edit&preview');

onMounted(async () => {
    await getData()
})



const mdInput = (mdContent) => {
    // console.log("🚀 ~ mdInput ~ mdContent:", mdContent)
}
const mdChange = (mdHtml, mdTxt, mdContent) => {
    // console.log("🚀 ~ mdChange ~ mdHtml, mdTxt, mdContent:", mdHtml, mdTxt, mdContent)
}

const getData = async () => {


    // const abc = await Axios.get("/public/example.md")
    // const abc = await fetch('/public/README.md')
    // const def = await abc.text()
    // markDownConent.value = abc.data;
    markDownConent.value = '# Hello World'

    // nextTick(() => {
    // MDRef.value.initCherryMD(def)
    // })
    // setTimeout(() => {
    //     markDownConent.value = def;
    // }, 1000)
}
</script>



<style lang="scss" scoped>
.markdown-view {
    width: 100%;
    height: 100%;
}
</style>